<template>
  <el-card class="box-card">
    <el-row slot="header" class="clearfix" style="height: 40px">
      <el-col :span="12">
        <h3>{{ name }}</h3>
        <h3 v-if="!name">企业账单</h3>
      </el-col>
      <el-col :span="12">
          <span style="float: right; ">
            <el-button plain type="primary" @click="showPay">添加账单</el-button>
          </span>
      </el-col>
    </el-row>
    <div class="text item">
      <el-table ref="multipleTable" :data="list" @row-click="showEidtBill">
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="月份" prop="month"></el-table-column>
        <el-table-column label="用量" prop="amount"></el-table-column>
        <el-table-column label="缴费类型" prop="type"></el-table-column>
        <el-table-column label="单价" prop="unitPrice"></el-table-column>
        <el-table-column label="删除">
          <el-button plain type="danger" @click="billDel()">删除账单</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page.sync="paging.page"
          :page-size.sync="paging.size"
          :total="total"
          background
          layout="prev, pager, next,jumper"
          @current-change="queryBill"
          style="margin-top: 20px"
      >
      </el-pagination>
    </div>
    <!--    修改弹窗-->
    <el-dialog
        :visible.sync="visible"
        title="修改账单"
        width="30%"
    >
      <bill-dialog :bill="billData" @success="visible = false; queryBill()"/>
    </el-dialog>
    <!-- 添加弹窗   -->
    <el-dialog :visible.sync="addVisible" title="添加账单" width="30%">
      <bill-dialog :botton="'添加账单'" :uuid="paging.condition.companyUuid" @success="addVisible = false; queryBill()"/>
    </el-dialog>
  </el-card>
</template>

<script>
import {Unicom} from "../../../../common/utils";
import BillDialog from "../billForm";
import {delectBill, QueryBill, UpdateBill} from "../../../../network/hydropowerApi";


export default {
  name: "querybill",
  components: {BillDialog},
  data() {
    return {
      visible: false,
      addVisible: false,
      list: null,
      total: null,
      paging: {
        page: 1,
        size: 10,
        condition: {
          companyUuid: null,
        },
      },
      billData: {},
      uuid: null,
      name: "",
    }
  },
  mounted() {
    this.receiveBill();
    this.queryBill();
    //接收企业参数
    Unicom.$on('queryHydropowerBillUuid', res => {
      this.paging.condition.companyUuid = res.uuid;
      this.name = res.name;
      this.queryBill();
    })
  },
  methods: {
    showPay() {
      if (!this.paging.condition.companyUuid) {
        this.$message({
          message: "请点击需添加账单的公司",
          type: "error"
        })
      } else {
        this.addVisible = true
      }
    },

    receiveBill() {
      Unicom.$on('data2', res => {
        console.log(this.name)
        this.paging.condition.companyUuid = res.uuid;
        this.name = res.name;
        this.queryBill();
      })
    },
    //查询账单
    queryBill() {
      QueryBill(this.paging).then(res => {
        this.list = res.data.records;
        this.total = res.data.total;
      })
    },
    //修改账单
    updateBill() {
      UpdateBill(this.billData).then(res => {
        if (res.code === 2000) {
          this.visible = false
          this.queryBill()
        }
      })

    },

    //删除账单
    billDel() {
      this.$confirm('确定删除此账单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delectBill(this.billData.uuid).then(res => {
          if (res.code === 2000) {
            this.queryBill();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    showEidtBill(row, column) {
      this.billData = row
      if (column.label !== '删除') {
        this.visible = true
      }
    }
  }
}

</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  /*width: 760px*/
  width: 100%
}
</style>